<template>
  <div class="insight-list">
    <div v-if="loading" class="insight-loading">
      <el-skeleton v-for="i in 3" :key="i" animated>
        <template #template>
          <el-skeleton-item variant="text" style="width: 80%" />
          <el-skeleton-item variant="text" style="width: 60%" />
        </template>
      </el-skeleton>
    </div>
    
    <div v-else-if="insights.length === 0" class="insight-empty">
      <el-empty description="暂无智能洞察" :image-size="80">
        <el-button type="primary" @click="$emit('refresh')">
          重新分析
        </el-button>
      </el-empty>
    </div>
    
    <div v-else class="insight-items">
      <div 
        v-for="insight in insights" 
        :key="insight.id"
        class="insight-item"
        :class="`priority-${insight.priority}`"
      >
        <div class="insight-icon">
          <el-icon :color="getPriorityColor(insight.priority)">
            <component :is="getPriorityIcon(insight.priority)" />
          </el-icon>
        </div>
        
        <div class="insight-content">
          <div class="insight-title">
            {{ insight.title }}
          </div>
          <div class="insight-desc">
            {{ insight.description }}
          </div>
          <div class="insight-meta">
            <el-tag v-if="insight.confidence" size="small" :type="getConfidenceType(insight.confidence)">
              置信度: {{ insight.confidence }}%
            </el-tag>
            <span class="insight-time">{{ insight.time }}</span>
          </div>
        </div>
        
        <div class="insight-actions">
          <el-button 
            v-if="insight.action" 
            type="primary" 
            link 
            @click="handleAction(insight)"
          >
            {{ insight.actionText || '查看' }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Warning, InfoFilled, SuccessFilled } from '@element-plus/icons-vue'

interface Insight {
  id: string
  title: string
  description: string
  priority: 'high' | 'medium' | 'low'
  confidence?: number
  time: string
  action?: string
  actionText?: string
}

interface Props {
  insights: Insight[]
  loading?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['action', 'refresh'])

const getPriorityColor = (priority: 'high' | 'medium' | 'low') => {
  const colors = {
    high: '#f5222d',
    medium: '#fa8c16', 
    low: '#1890ff'
  } as const
  return colors[priority] || '#1890ff'
}

const getPriorityIcon = (priority: 'high' | 'medium' | 'low') => {
  const icons = {
    high: Warning,
    medium: InfoFilled,
    low: SuccessFilled
  } as const
  return icons[priority] || InfoFilled
}

const getConfidenceType = (confidence: number) => {
  if (confidence >= 80) return 'success'
  if (confidence >= 60) return 'warning'
  return 'info'
}

const handleAction = (insight: Insight) => {
  emit('action', insight)
}
</script>

<style scoped lang="scss">
.insight-list {
  .insight-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .el-skeleton {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }
  
  .insight-empty {
    padding: 20px 0;
  }
  
  .insight-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .insight-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      border: 1px solid #f0f0f0;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #e8f4ff;
        background: #fafafa;
      }
      
      &.priority-high {
        border-left: 4px solid #f5222d;
      }
      
      &.priority-medium {
        border-left: 4px solid #fa8c16;
      }
      
      &.priority-low {
        border-left: 4px solid #1890ff;
      }
      
      .insight-icon {
        flex-shrink: 0;
        margin-top: 2px;
      }
      
      .insight-content {
        flex: 1;
        
        .insight-title {
          font-weight: 600;
          color: #1f2d3d;
          margin-bottom: 4px;
        }
        
        .insight-desc {
          font-size: 14px;
          color: #606266;
          line-height: 1.4;
          margin-bottom: 8px;
        }
        
        .insight-meta {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .insight-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
      
      .insight-actions {
        flex-shrink: 0;
      }
    }
  }
}
</style>